<template>
	<view>
		<view class="cu-list menu card-menu margin-top" v-if="order">
			<view class="cu-item padding" style="min-height: 200rpx;">
				<view class="cuIcon-locationfill text-blue" style="font-size: 50upx;min-height: 100rpx;"></view>
				<view class="content">
					<view class="text-cut">
						<text class="text-lg" v-if="order.ship_name">{{order.ship_name}}</text>
						<text class="text-df text-grey" style="margin-left: 6upx;line-height: 40upx;" v-if="order.ship_mobile">{{order.ship_mobile}}</text>
					</view>
					<view class="text-sm flex flex-direction" style="line-height: 32upx;font-weight: 600;">
						<view>{{order.ship_province||''}}{{order.ship_city||''}}{{order.ship_county||''}}{{order.ship_town||''}}{{order.ship_addr||''}}</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="cu-list menu card-menu margin-top">
				<view class="cu-item"  style="padding-top: 10px;">
					<view class="content">
						<text class="cuIcon-shop text-cyan" style="font-size: 18px;"></text>
						<text class="text-black text-bold text-df">{{order.shop_name}}</text>
					</view>
				</view>
				<view class="cu-item" style="padding:6px 10px 10px;" v-for="(list,index) in order.order_sku_list" :key="index" :style="index<order_sku_list.length-1?'border-bottom:1px solid #eee;':''">
					<view class="cu-avatar radius goodsImg" :style="'background-image:url('+list.goods_image+');'"></view>
					<view class="content margin-left flex-column" style="height: 180upx;">
						<view class="flex" style="align-items: flex-start;">
							<view style="flex:1;">
								<view class="text-sm" style="line-height: 32upx;font-weight: 400;">{{list.name}}</view>
								<view class="text-gray">
									<text style="background-color: #eee;padding: 3px 4px;font-size: 22upx;">
										{{list['spec_list'][0].spec_value || '默认'}}
									</text>
								</view>
							</view>
							<view class="flex-column">
								<view class="text-gray text-sm">￥{{formatPrice(list.goods_type==='INDUCTION'?list.cost:izmember?list.cost:list.subtotal)}}</view>
								<view class="text-gray text-sm" style="text-align: right;">x{{list.num}}</view>
							</view>
						</view>
						<view class="text-sm" style="color: #ff7435;font-weight: 600;font-size: 22upx;">发货时间: 付款后48小时内</view>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-cut text-sm">支付配送</text>
						<text class="text-cut text-sm margin-left-sm">普通快递</text>
					</view>
					<view class="action" v-if="order.receive_time">
						<text class="text-cut text-sm">{{order.receive_time}}</text>
					</view>
				</view>
				 <view class="cu-item" style="padding-bottom: 20px;">
					<view class="action text-sm flex justify-end align-center" style="width: 100%;vertical-align: center;" v-if="order.order_price">
						<view class="text-grey">共{{order.goods_num}}件</view> 
						<view class="text-black" style="margin-left: 6upx;">{{izNeddPay?'需':'实'}}付款:</view>
						<view class="text-red text-lg text-bold">￥{{formatPrice(order.order_price)}}</view>
					</view>
				</view>
			</view>
			<view class="cu-list menu card-menu margin-top">
				<view class="cu-item"  style="padding-top: 10px;">
					<view class="content">
						<text class="text-black text-bold text-df">订单信息</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-cut text-xs">订单编号:</text>
						<text class="text-cut text-sm margin-left-sm">{{order.sn}}</text>
					</view>
					<view class="action">
						<text class="text-cut text-sm text-theme" @tap="copyBtn(order.sn)">复制</text>
					</view>
				</view>
				<view class="cu-item" v-if="order.pay_order_no">
					<view class="content">
						<text class="text-cut text-xs">支付交易号:</text>
						<text class="text-cut text-sm margin-left-sm">{{order.pay_order_no}}</text>
					</view>
				</view>
				<view class="cu-item" v-if="order.create_time">
					<view class="content">
						<text class="text-cut text-xs">创建时间:</text>
						<text class="text-cut text-sm margin-left-sm">{{checkTime(order.create_time)}}</text>
					</view>
				</view>
				<view class="cu-item" v-if="order.payment_time">
					<view class="content">
						<text class="text-cut text-xs">付款时间:</text>
						<text class="text-cut text-sm margin-left-sm">{{checkTime(order.payment_time)}}</text>
					</view>
				</view>
				<view class="cu-item" v-if="order.ship_time">
					<view class="content">
						<text class="text-cut text-xs">发货时间:</text>
						<text class="text-cut text-sm margin-left-sm">{{checkTime(order.ship_time)}}</text>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white tabbar foot border shop" v-if="izNeddPay || izconfirmRog || izdelOrder || izcancelOrder ||izCheckExpress">
				<view class="padding flex justify-end" style="width: 100%;">
					<button class="cu-btn round shadow-blur line-grey text-black text-sm margin-left" v-if="izCheckExpress" @tap="getExpress(order.ship_no)">查询物流</button>
					<button class="cu-btn round shadow-blur line-grey text-black text-sm margin-left" v-if="izcancelOrder" @tap="showModal()">取消订单</button>
					<button class="cu-btn round shadow-blur line-grey text-black text-sm margin-left" v-if="izdelOrder" @tap="delOrder()">删除订单</button>
					<button class="cu-btn round shadow-blur line-grey text-black text-sm margin-left" v-if="izconfirmRog" @tap="confirmRog()">确认收货</button>
					<button class="cu-btn round shadow-blur line-grey text-black text-sm margin-left" v-if="izNeddPay" @tap="pay()">去付款</button>
				</view>
			</view>
		</view>
		<view class="blck"></view>
		<view class="cu-modal" :class="cancelshowModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-theme justify-end">
					<view class="content">取消原因</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-white"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					<input v-model="cancelReason" placeholder="请输入取消原因" name="input"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-theme text-theme" @tap="hideModal">取消</button>
						<button class="cu-btn bg-theme margin-left" @tap="cancelOrder(order.sn)">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Order_API from '../../api/order.js' 
	import * as Foundation from '@/utils/Foundation.js'
	export default {
		data() {
			return {
				sn:'',
				order:{},
				izNeddPay:false,
				izcancelOrder:false, //是否可取消订单
				izconfirmRog:false,//是否已经收货
				izdelOrder:false,//是否可删除订单
				cancelshowModal:false,
				cancelReason:'',
				izCheckExpress:false,
				active:0,
				izmember:uni.getStorageSync('role').id?true:false
			};
		},
		onLoad(e) {
			// console.log('1213',e)
			this.sn = e.sn
			this.getOrderDetail(e.sn)
			if(e.active){
				// console.log('e.active',e.active)
				this.active = parseInt(e.active) 
			}
		},
		
		onBackPress() {
			this.clearOrder();
		},
		filters: {
			toFixed:(x)=> {
				return parseFloat(x).toFixed(2);
			}
		},
		methods: {
			getOrderDetail(sn){
				Order_API.getOrderDetail(sn).then(res =>{
					this.order = res
					this.checkOrderType()
				})
			},
			getExpress(ship_no){
				uni.navigateTo({
					url:'./logistics?ship_no='+ship_no
				})
			},
			// formatPrice(price){
			//   return String(Number(price).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
			// },
			checkOrderType(){
				switch(this.order.order_status){
					case 'CONFIRM':
					this.izcancelOrder = true
					this.izNeddPay = true
					this.izCheckExpress = false
					return "去付款"
					case 'PAID_OFF':
					this.izcancelOrder = true
					this.izCheckExpress = false
					return "提醒卖家发货"
					case 'SHIPPED':
					this.izCheckExpress = true
					this.izconfirmRog = true
					return "确认收货"
					case 'ROG':
					this.izCheckExpress = true
					this.izdelOrder = true
					return "去评价"
					case 'COMPLETE':
					this.izdelOrder = true
					this.izCheckExpress = true
					return
					case 'CANCELLED':
					this.izdelOrder = true
					this.izCheckExpress = false
					return "取消订单"
					case 'AFTER_SERVICE':
					return "查看售后"
				}
			},
			copyBtn(e) {
			    uni.setClipboardData({
			     //准备复制的数据
			      data: e,
			      success:(res)=>{
			        uni.showToast({
			          title: '复制成功',
			        });
			      }
			    })
			},
			pay(){
				uni.redirectTo({
					url:'../pay/payment?amount='+this.order.order_price+'&sn='+this.order.sn
				})	
			},
			// 取消订单
			cancelOrder(sn){
				if(this.cancelReason){
					Order_API.cancelOrder(this.sn,this.cancelReason).then(res =>{
						if(res === 'SUCCESS'){
							uni.showToast({
								title:'取消成功',
								icon:'success',
								success:()=> {
									const pages = getCurrentPages()
									const prevPage = pages[pages.length-2] // 上一页
									prevPage.active = this.active    
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}else{
							uni.showToast({
								title:res.response.data.message,
								icon:'none',
								duration:2000,
								success:()=> {
									const pages = getCurrentPages()
									const prevPage = pages[pages.length-2] // 上一页
									prevPage.active = this.active    
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}
					})
				}else{
					uni.showToast({
						title:'请填写取消原因',
						icon:'none'
					})
				}	
			},
			confirmRog(){
				uni.showModal({
					title: '收货提示',
					content: '你确定已收到购买的商品?',
					success: (res)=>{
						if (res.confirm) {
							Order_API.confrimRog(this.sn).then(res=>{
								uni.showToast({
									icon:'success',
									title:'收货成功',
									success:()=> {
										const pages = getCurrentPages()
										const prevPage = pages[pages.length-2] // 上一页
										prevPage.active = this.active    
										uni.navigateBack({
											delta: 1
										})
									}
								})
							})
						}
					}
				});
			},
			delOrder(){
				uni.showModal({
					title: '删除提示',
					content: '你确定要删除该订单吗?',
					success: (res)=>{
						if (res.confirm) {
							Order_API.deleteOrder(this.sn).then(res =>{
								uni.showToast({
									icon:'success',
									title:'删除成功',
									success:()=> {
										const pages = getCurrentPages()
										const prevPage = pages[pages.length-2] // 上一页
										prevPage.active = this.active    
										uni.navigateBack({
											delta: 1
										})
									}
								})
							})
						}
					}
				});
			},
			showModal(){
				this.cancelshowModal = true
			},
			hideModal(){
				this.cancelshowModal = false
			},
			checkTime(date){
				return Foundation.unixToDate(date)
			},
			formatPrice(price){
				return Foundation.formatPrice(price)
			}
		}
	}
</script>

<style lang="scss" scoped>
.no-border{
	border:none
}
/deep/.cu-list.menu>.cu-item:after {
	border-bottom: none;
	height: 60upx;
}
.addr{
	width: 86%;
	padding: 20upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	display: flex;
	.icon{
		width: 80upx;
		height: 80upx;
		display: flex;
		align-items: center;
		image{
			width: 60upx;
			height: 60upx;
		}
	}
	.tel-name{
		width: 100%;
		display: flex;
		font-size: 32upx;
		.tel{
			margin-left: 40upx;
		}
	}
	.addres{
		width: 100%;
		font-size: 26upx;
		color: #999;
	}
}
.buy-list{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		margin: 30upx 0;
		.goods-info{
			width: 100%;
			display: flex;
			.img{
				width: 22vw;
				height: 22vw;
				border-radius: 10upx;
				overflow: hidden;
				flex-shrink: 0;
				margin-right: 10upx;
				image{
					width: 22vw;
					height: 22vw;
				}
			}
			.info{
				width: 100%;
				height: 22vw;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
				position: relative;
				.title{
					width: 100%;
					font-size: 28upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					// text-align: justify;
					overflow: hidden;
				}
				.spec{
					font-size: 22upx;
					background-color: #f3f3f3;
					color: #a7a7a7;
					height: 40upx;
					display: flex;
					align-items: center;
					padding: 0 10upx;
					border-radius: 20upx;
					margin-bottom: 20vw;
				}
				.price-number{
					position: absolute;
					width: 100%;
					bottom: 0upx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 28upx;
					height: 40upx;
					.price{
						color: #f06c7a;
					}
					.number{
						display: flex;
						justify-content: center;
						align-items: center;
						
					}
				}
			}
		}
	}
}
.order{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		margin: 20upx 0;
		height: 40upx;
		display: flex;
		.left{
			font-size: 28upx;
		}
		.right{
			margin-left: 40upx;
			font-size: 26upx;
			color: #999;
			input{
				font-size: 26upx;
				color: #999;
			}
		}
	}
}
.blck{
	width: 100%;
	height: 130upx;
}
.footer{
		width: 92%;
		padding: 0 4%;
		background-color: #fbfbfb;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 0upx;
		z-index: 5;
		
		.settlement{
			width: 80%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.sum{
				width: 50%;
				font-size: 28upx;
				margin-right: 10upx;
				display: flex;
				justify-content: flex-end;
				.money{
					font-weight: 600;
				}
			}
			.btn{
				padding: 0 30upx;
				height: 60upx;
				background-color: #f06c7a;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30upx;
				border-radius: 40upx;
			}
		}
	}
.detail{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		height: 60upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.nominal{
			font-size: 28upx;
		}
		.content{
			font-size: 26upx;
			color: #f06c7a;
		}
	}
}
/deep/.cu-list.menu>.cu-item  {
min-height: 80rpx;
}
/deep/.cu-list.menu>.cu-item .content>text[class*=cuIcon] {
	width: 18px;
	text-align: left;
}
.goodsImg{
	width: 180upx;
	height: 180upx;
}
</style>
